<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button
          type="primary"
          :disabled="!buttonsPermissions.XinZeng"
          :class="!buttonsPermissions.XinZeng ? 'disabled_button' : ''"
          @click="onShowAdd"
        >新增(N)</el-button>
        <el-button :disabled="!buttonsPermissions.DaoRu" @click="importExcel">导入</el-button>
        <!-- <el-select v-model="importValue">
          <el-option
            label="导入"
            value="导入"
            :disabled="!buttonsPermissions.DaoRu"
            :style="!buttonsPermissions.DaoRu ? 'pointer-events: none; font-size: 12px' : 'font-size: 12px'"
            @click.native="importExcel"
          ></el-option>
          <el-option
            label="导出"
            value="导出"
            :disabled="!buttonsPermissions.DaoChu"
            :style="!buttonsPermissions.DaoChu ? 'pointer-events: none; font-size: 12px' : 'font-size: 12px'"
            @click.native="exportExcel"
          ></el-option>
        </el-select>-->
        <el-select v-model="enableValue" @change="searchSelect(enableValue)">
          <el-option
            style="font-size: 12px"
            @click.native="onBatchChangeStatus(enableValue)"
            v-for="item in enableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          :disabled="!buttonsPermissions.ShanChu"
          :class="!buttonsPermissions.ShanChu ? 'disabled_button' : ''"
          @click="onBatchDelete"
        >批量删除</el-button>
        <el-checkbox v-model="checkboxStatus">显示禁用快递物流</el-checkbox>
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.queryParam" placeholder="请输入公司名称\简称\拼音码\地址\联系人"></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="brush">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="table_content">
          <el-table
            :data="newData"
            height="100%"
            border
            show-summary
            :summary-method="getSummaries"
            tooltip-effect="dark"
            highlight-current-row
            :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column
              label="操作"
              :resizable="false"
              style="width: 80px;"
              v-if="buttonsPermissions.ShanChu && buttonsPermissions.XiuGai"
            >
              <template slot-scope="scope">
                <i
                  v-if="buttonsPermissions.XiuGai"
                  @click="onEditRow(scope.row)"
                  class="el-icon-edit-outline"
                ></i>
                <i
                  v-if="buttonsPermissions.ShanChu"
                  @click="onDeleteRow(scope.row)"
                  class="el-icon-delete"
                ></i>
              </template>
            </el-table-column>
            <template v-for="(item, i) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="i"
                :prop="item.props"
                v-if="item.zidingyiState"
                min-width="150px"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                :width="item.cellWidth"
              ></el-table-column>
            </template>
            <el-table-column label="状态" fixed="right">
              <template slot-scope="scope">
                <el-switch
                  @change="onChangeStatus(scope.row)"
                  v-model="scope.row.expressStatus"
                  active-color="#1A93FA"
                  inactive-color="#D3D2D2"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增物流公司 -->
    <DialogDLogisticsAdd
      ref="dialogLogisticsAdd"
      @closeCancel="closeCancel"
      :title="title"
      @onAddSubmit="onAddSubmit"
    ></DialogDLogisticsAdd>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="物流信息"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 提醒弹框 -->
    <PopupReminder
      ref="reminderRef"
      @dialogVisibleClose="onNo"
      @closeDiaVisible="closeDiaVisible"
      :tipsData="tipsData"
      @onConfirm="onYes"
    ></PopupReminder>
    <!-- 成功弹框 -->
    <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess>
    <PopupImportSuccess ref="successImportRef" :tipsData="tipsData"></PopupImportSuccess>
    <!-- 导入 -->
    <DialogImport
      ref="daoru"
      :titles="columnData"
      url="/xghExpress/xghExpress/importExcel"
      :isGoods="true"
      @importData="importData"
      @downloadTemplate="exportExcel"
    ></DialogImport>
  </div>
</template>

<script>
import { getAction, deleteAction, postAction, putAction, downPostFile } from '@/api/manage'
import PopupReminder from '@/views/components/popupReminder'
import DialogDLogisticsAdd from '@/views/components/dialogLogisticsAdd'
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogImport from '@/components/c_Import/index1'
import PopupSuccess from '../../components/popupSuccess'
import PopupImportSuccess from '../../components/popupImportSuccess'
// 导入调用处理权限数据方法
import { handleOtherPermissions, handlePermissions } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { delcommafy } from '../../../utils'
export default {
  name: 'logisticsInfo',
  components: {
    CConfiguration,
    DialogDLogisticsAdd,
    PopupReminder,
    DialogImport,
    PopupSuccess,
    PopupImportSuccess,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions () {
      return handlePermissions('物流信息')
    },
    modifiable () {
      return handleOtherPermissions('可修改快递物流信息')
    },
  },
  created () {
    // 请求物流信息
    this.getLogisticsInfo()
  },
  data () {
    return {
      isShow: false,
      // 每一行的id
      lineId: 0,
      checkboxStatus: false,
      // 传递给弹框的数据
      tipsData: {
        tipsState: '',
        tipsWords: '',
        tipsMark: '',
      },
      nowData: {},
      // 搜索
      queryData: {
        queryParam: '',
      },
      total: 0,
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      newData: [],
      newnewData: {},
      defaultColumnData: [],
      columnData: [
        {
          morenName: '公司名称',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: true,
          props: 'expressName',
          isRequired: true,
        },
        {
          morenName: '公司简称',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'expressAbbreviation',
        },
        {
          morenName: '拼音编码',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'pinyinCode',
        },
        {
          morenName: '地址',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'expressAddress',
        },
        {
          morenName: '联系人',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'userName',
        },
        {
          morenName: '联系电话',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'expressLandline',
        },
        {
          morenName: '手机',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'expressPhone',
        },
        {
          morenName: '传真',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'expressFax',
        },
        {
          morenName: '开户银行',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'bankName',
        },
        {
          morenName: '账号',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'bankNumber',
        },
        {
          morenName: '期初应收款',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'startCollectPrice',
        },
        {
          morenName: '期初应付款',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'startPayPrice',
        },
        {
          morenName: '累计应收款',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'allCollectPrice',
        },
        {
          morenName: '累计应付款',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'allPayPrice',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'remark',
        },
      ],
      ruleForm: {
        wlkdmc: '',
        pym: '',
        wljc: '',
        dz: '',
        lxr: '',
        lxdh: '',
        sj: '',
        cz: '',
        khyh: '',
        yhzh: '',
        qcysk: '',
        qcyfk: '',
        ljysk: '',
        ljyfk: '',
        remarks: '',
      },
      importValue: '导入',
      enableOptions: [
        {
          value: true,
          label: '启用',
        },
        {
          value: false,
          label: '禁用',
        },
      ],
      enableValue: '启用',
      // 表示
      biaoshi: 0,
      batchData: [], // 存储多选的数据
      updateId: '', // 修改列配置时返回的id
      title: '新增快递物流',
      filterText: '',
      url: {
        logisticsList: '/xghExpress/xghExpress/list',
        api: '物流信息',
        exportXlsUrl: '/xghExpress/xghExpress/exportXls'
      }
    }
  },
  mounted () {
    this.selectTitle()
  },
  watch: {
    checkboxStatus: {
      deep: true,
      handler () {
        this.getLogisticsInfo()
      },
    },
  },
  methods: {
    // 初始化查询列配置值
    async selectTitle () {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn (value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    // 批量启用禁用数据
    onBatchChangeStatus (val) {
      val = val == true ? '启用' : '禁用'
      if (this.batchData.length) {
        this.nowStatus = val
        this.tipsData.tipsWords = '是否批量' + val + '?'
        this.tipsData.tipsMark = 'onBatchChangeStatus'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$elMessage({
          showClose: true,
          message: '请先选择需要' + val + '的数据！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      }
      this.enableValue = '启用'
    },
    closeCancel (val) {
      this.tipsData.tipsWords = '确定取消吗?'
      this.tipsData.tipsMark = 'IsonClose'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 提醒弹框取消后操作
    onNo (mark) {
      if (mark == 'onChangeStatus') {
        this.newData.forEach((item) => {
          if (item.id == this.nowData.id) {
            item.expressStatus = !item.expressStatus
          }
        })
      }
    },
    closeDiaVisible () {
      this.isShow = false
    },
    // 提醒弹框确认后操作
    async onYes (mark) {
      if (mark == 'onChangeStatus') {
        let str = {
          ids: this.nowData.id,
          status: this.nowData.expressStatus ? '0' : '1',
        }
        getAction('/xghExpress/xghExpress/enableOrDisableBatch', str).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.result)
            this.getLogisticsInfo()
          } else {
            this.nowData.expressStatus = !this.nowData.expressStatus
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onBatchDelete') {
        let ids = []
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
        getAction('/xghExpress/xghExpress/deleteBatch', {
          ids: ids.toString(),
        }).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getLogisticsInfo()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'IsonClose') {
        this.$refs.dialogLogisticsAdd.dialogVisible = false
      } else if (mark == 'onBatchChangeStatus') {
        let ids = []
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
        getAction('/xghExpress/xghExpress/enableOrDisableBatch', {
          ids: ids.toString(),
          status: this.nowStatus == '启用' ? 0 : 1,
        }).then((res) => {
          if (res.code === 200) {
            this.getLogisticsInfo()
            this.$elMessage.success(res.result)
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onRemove') {
        getAction('/xghExpress/xghExpress/delete', {
          id: this.lineId,
        }).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getLogisticsInfo()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      }
    },
    async onAddSubmit (val) {
      if (this.biaoshi === 0) {
        // 校验已经加载了表单里面，此处无需再校验
        // if (!val.expressName.trim()) {
        //   this.$elMessage({
        //     message: '公司名称必填',
        //     type: 'warning',
        //   })
        //   this.$refs.dialogLogisticsAdd.dialogVisible = true
        //   return
        // }
        const result = await postAction('/xghExpress/xghExpress/add', val)
        if (result.code === 200) {
          this.$elMessage({
            message: '添加成功！',
            type: 'success',
          })
          this.getLogisticsInfo()
        }
      }
      if (this.biaoshi == 1) {
        val.expressStatus = val.expressStatus ? '0' : '1'
        const result = await putAction('/xghExpress/xghExpress/edit', val)
        if (result.code !== 200) {
          return this.$elMessage.error('修改失败！')
        }
        this.$elMessage.success('修改成功！')
        this.getLogisticsInfo()
        this.biaoshi = 0
      }
    },
    // 刷新
    brush () {
      Object.assign(this.$data, this.$options.data())
      this.getLogisticsInfo()
      this.selectTitle()
    },
    // 搜索
    handleSearch () {
      this.getLogisticsInfo()
    },
    // 数据请求
    async getLogisticsInfo (page) {
      let data = {
        ...this.queryData,
        pageSize: this.pagesize,
        pageNo: page || 1,  //只有切换页码时这个值会变化，其他触发都是第一页
      }
      data.showFlag = this.checkboxStatus ? '1' : '0'
      getAction(this.url.logisticsList, data).then((res) => {
        if (res.code === 200) {
          this.total = res.result.total
          this.newData = res.result.records
          this.newData.forEach((item) => {
            item.expressStatus = item.expressStatus === 0 ? true : false
          })
        }
      })
    },
    // change改变事件
    onChangeStatus (row) {
      this.nowData = row
      this.tipsData.tipsWords = '是否确认' + (row.expressStatus ? '启用' : '禁用') + '?'
      this.tipsData.tipsMark = 'onChangeStatus'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.pagesize = val
      this.getLogisticsInfo()
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getLogisticsInfo(val)
    },
    // 触发列配置弹框
    onShowColumn () {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 合计列计算
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else if (index === 15 || index === 14) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = 'N/A'
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 触发表格修改按钮
    onEditRow (val) {
      this.newnewData = JSON.parse(JSON.stringify(val))
      this.biaoshi = 1
      this.title = '编辑快递物流'
      this.$refs.dialogLogisticsAdd.edit(val)
    },
    // 新增
    handleShortcutKeyAdd () {
      this.onShowAdd()
    },
    // 触发新增数据按钮
    onShowAdd () {
      if (!this.buttonsPermissions.XinZeng) {
        this.$elMessage.warning('未拥有新增权限！')
        return
      }
      this.$refs.dialogLogisticsAdd.add()
      // this.newnewData = {
      //   id: '',
      //   expressName: '',
      //   pinyinCode: '',
      //   expressAbbreviation: '',
      //   expressAddress: '',
      //   userName: '',
      //   expressLandline: '',
      //   expressPhone: '',
      //   expressFax: '',
      //   bankName: '',
      //   bankNumber: '',
      //   startCollectPrice: '',
      //   startPayPrice: '',
      //   allCollectPrice: '',
      //   allPayPrice: '',
      //   remark: '',
      // }
      // this.title = '新增快递物流'
      // this.$refs.dialogLogisticsAdd.dialogVisible = true
    },
    // 触发表格多选按钮
    handleSelectionChange (val) {
      this.batchData = val
    },
    // 触发启用禁用按钮
    searchSelect (val) {
      if (this.batchData.length) {
        this.batchData.forEach((value) => {
          this.newData.forEach((v, i) => {
            if (value.id == v.id) {
              this.newData[i].state = val
            }
          })
        })
        this.newData = this.newData
      }
    },
    // 删除当前行
    onDeleteRow (row) {
      this.lineId = row.id
      this.tipsData.tipsState = 'delete'
      this.tipsData.tipsWords = '是否确认删除?'
      this.tipsData.tipsMark = 'onRemove'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 批量删除
    onBatchDelete () {
      if (this.batchData.length) {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认批量删除?'
        this.tipsData.tipsMark = 'onBatchDelete'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$elMessage({
          showClose: true,
          message: '请先选择需要删除的数据！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      }
    },
    // 导入数据
    importExcel () {
      this.$refs.daoru.dialogVisible = true
    },
    importData (res) {
      this.tipsData.tipsWords = res.message
      this.$refs.successImportRef.dialogVisible = true
      this.getLogisticsInfo()
    },
    // 导出数据
    exportExcel () {
      let list = []
      // if (this.batchData && this.batchData.length > 0) {
      //   for (let index = 0; index < this.batchData.length; index++) {
      //     const element = this.batchData[index]
      //     list.push(element.id)
      //   }
      // } else {
      //   this.$elMessage.warning('请选择想要导出的数据！')
      //   return
      // }
      let queryParam = {
        fileName: '物流信息',
        selections: list.join(','),
      }
      this.handleExportXlsByStaff('物流信息', queryParam)
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 102px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 0.1rem;
    border: none;
    margin-right: 0.187512rem;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox__label {
      font-size: 12px;
      padding-left: 0.1rem;
    }

    ::v-deep .el-select {
      width: 70px;
      height: 30px;
      box-sizing: border-box;
      margin-right: 0.187512rem;

      .el-input {
        .el-input__inner {
          height: 30px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }

    .selectSty {
      width: 2.625164rem;
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 4.725295rem;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_table {
    // width: calc(100% - 3.000188rem);
    width: 100%;
    height: 100%;
    // margin-left: 0.187512rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;

    .table_content {
      height: calc(100% - 1rem);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            min-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }

          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }

        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 20px;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 20px;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      .total {
        margin-top: 0.25rem;
        width: 3.750234rem;
        font-size: 12px;
        color: #666666;
      }

      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 10px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>
